<template>
	<view class="container">
		<!-- 账户信息 -->
		<view class="top_box">
			<image style="width: 88rpx;" :src="userInfo.avatarUrl" mode="widthFix"></image>
			<view class="info">
				<view class="text1">{{userInfo.nickName}}</view>
				<view class="text2">{{userInfo.phone}}</view>
			</view>
		</view>
		<view class="jine">转账金额</view>
		<view class="input-box">
			<text class="text3">￥</text>
			<input class="input_area" type="number" v-model="money" @input="inputmoney" placeholder="至少50且为10的倍数"/>
		</view>
		<view class="transfer" :class="{'transfer-after':flag}" @click="transfer">转账</view>
	</view>
</template>

<script>
	import {selectAccount,transferAccount} from '../../api/user.js'
	export default{
		data(){
			return{
				flag:false,
				money:'',
				userInfo:[],
				phone:''
			}
		},
		onLoad(option) {
			this.phone=option.userAccount
			this.getAccount();
			console.log(option)
			
		},
		watch:{
			money: {
				handler(val, oldVal){
					this.money=val.replace(/\b(0+)/gi,"")
					console.log(this.money.replace(/\b(0+)/gi,""))
				},
				deep:true
			}
		},
		methods:{
			inputmoney(){
				if(this.money.trim()!=""&&this.money!="0"&&parseInt(this.money)%10==0&&this.money>=50){
					if(parseInt(this.money)<=0){
						this.money=0
						return
					}
					this.flag=true;
				}else{
					this.flag=false;
				}
			},
			transfer(){
				this.getTransfer()
			},
			getAccount(){
				this.get(selectAccount,{userAccount:this.phone}).then(res=>{
					console.log(res);
					this.userInfo=res.data
				})
			},
			async getTransfer(){
				if(this.flag==false){
					this.msg('请输入正确的金额','none')
				}else{
					this.showMd('是否确认转账',()=>{
						this.post(transferAccount,{coverUserId:this.userInfo.userId,transferMoney:this.money}).then(res=>{
							this.msg("转账成功")
							setTimeout(()=>{
								uni.navigateBack({
									delta:2
								})
							},1500)
							console.log(res)
						})
					})
				}
				
			}
		}
	}
</script>

<style>
	.container{
		padding: 50rpx 30rpx 0;
	}
	.top_box{
		width: 690rpx;
		display: flex;
		align-items: center;
	}
	.info{
		margin-left: 20rpx;
	}
	.text1{
		font-size: 32rpx;
		font-weight: 300;
		color: #666666;
	}
	.text2{
		font-size: 24rpx;
		font-weight: 300;
		color: #666666;
	}
	.jine{
		width: 104rpx;
		font-size: 26rpx;
		font-weight: 300;
		color: #999999;
		margin-top: 60rpx;
	}
	.input-box{
		margin-top: 23rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #D5D5D5;
		display: flex;
		align-items: center;
	}
	.text3{
		font-size: 36rpx;
		font-weight: 400;
		color: #333333;
	}
	.input_area{
		padding-left: 20rpx;
	}
	.transfer{
		width: 460rpx;
		height: 88rpx;
		background: #F0812D;
		opacity: 0.3;
		border-radius: 8rpx;
		margin: 70rpx auto;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.transfer-after{
		background: #F0812D;
		opacity: 1;
	}
</style>
